<template>
    <div class="terminal-parent">
        <div ref="terminalContainer" class="terminal-container">
    <div class="terminal-header">
        <div class="window-controls">
            <div class="control-dot red"></div>
            <div class="control-dot yellow"></div>
            <div class="control-dot green"></div>
        </div>
        <div class="connection-status" :class="connectionStatus.status">
            {{ connectionStatus.message }}
        </div>
    </div>
</div>
    </div>
</template>

<script setup lang="ts">
const prop = defineProps({
    websocketUrl: {
        type: String,
        required: true,
    },
})

import { ref, onMounted, reactive } from 'vue'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import 'xterm/css/xterm.css'
// WebSocket配置
const terminalContainer = ref(null)
let terminal: any = null
let fitAddon: any = null
let ws: any = null
const connectionStatus = reactive({
  status: 'disconnected', // connecting, connected, disconnected
  message: '未连接'
})

// 初始化终端
const initTerminal = () => {
    terminal = new Terminal({
        cursorBlink: true,
        scrollback: 10000, // 增加滚动缓冲区大小
        allowTransparency: true,
        fontSize: 14,
        fontFamily: 'Menlo, Monaco, "Courier New", monospace',
    })

    // 加载FitAddon
    fitAddon = new FitAddon()
    terminal.loadAddon(fitAddon)

    // 挂载到DOM
    terminal.open(terminalContainer.value)
    //这里一定要做延时
    setTimeout(() => {
        fitAddon.fit()
    }, 60)

    // 窗口变化监听
    if (fitAddon) {
        window.addEventListener('resize', fitAddon.fit())
    }

    handleWebSocket()
    // 监听用户输入
    terminal.onData((data: any) => {
        ws.send(data)
    })
}

// WebSocket通信处理
const handleWebSocket = () => {
    ws = new WebSocket(prop.websocketUrl)

    ws.onopen = () => {
        console.log('WebSocket连接已建立')
        connectionStatus.status = 'connected'
        connectionStatus.message = '已连接'
        ws.send('')
    }

    ws.onmessage = (event: any) => {
        // 处理服务器返回的数据
        terminal.write(event.data)
    }

    ws.onclose = () => {
        console.log('连接已关闭')
        connectionStatus.status = 'disconnected'
        connectionStatus.message = '已断开'
    }

    ws.onerror = (error: any) => {
        console.error('WebSocket错误:', error)
        connectionStatus.status = 'disconnected'
        connectionStatus.message = '连接错误'
    }
}

// 处理终端输入

onMounted(() => {
    initTerminal()
})
</script>

<style scoped>
.terminal-parent {
  width: 100%;
  height: 100%;
}

.terminal-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.terminal-header {
  padding: 8px 12px;
  background-color: #1a1a1a;
  border-bottom: 1px solid #333;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.connection-status {
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
}

.connection-status.connecting {
  background-color: #ffbd2e;
  color: #000;
}

.connection-status.connected {
  background-color: #27c93f;
}

.connection-status.disconnected {
  background-color: #ff5f56;
}

.control-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.red { background-color: #ff5f56; }
.yellow { background-color: #ffbd2e; }
.green { background-color: #27c93f; }

:deep(.xterm) {
  flex: 1;
}

/* 自定义终端样式 */
:deep(.terminal) {
  background-color: #1e1e1e !important;
  color: #f8f8f8 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  padding: 12px;
}

/* 自定义滚动条 */
:deep(.xterm-viewport) {
  scrollbar-color: #666 #2d2d2d !important;
  scrollbar-width: thin !important;
}

:deep(.xterm-viewport)::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

:deep(.xterm-viewport)::-webkit-scrollbar-thumb {
  background-color: #666 !important;
  border-radius: 4px !important;
}

:deep(.xterm-viewport)::-webkit-scrollbar-track {
  background-color: #2d2d2d !important;
}

/* 光标样式优化 */
:deep(.xterm-cursor) {
  border-left-color: #fff !important;
  border-left-width: 2px !important;
}
</style>
